<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .wrap {
        width: 1000px;
        margin: 20px auto;
        border: 1px solid #000;
        position: relative;
      }
      .mune {
        width: 200px;
        height: 400px;
      }
      .mune > li {
        width: 100%;
        height: 60px;
        background-color: pink;
      }
      .list {
        width: 800px;
        height: 100%;
        background-color: pink;
        position: absolute;
        left: 200px;
        top: 0;
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <!-- 侧边导航 -->
      <ul class="mune">
        <li class="mune_li">1111</li>
        <li class="mune_li">2222</li>
      </ul>
      <!-- 第一栏的内容 -->
      <ul class="list">
        <li>内容111</li>
      </ul>
      <!-- 第2栏的内容 -->
      <ul class="list">
        <li>内容222</li>
      </ul>
    </div>
    <script type="text/javascript">
      //1、获取所需元素
      var muneLis = document.getElementsByClassName("mune_li"),
        list = document.getElementsByClassName("list");

      //1-1、测试获取元素
      console.log(muneLis);
      console.log(list);

      //2、给元素绑定事件句柄
      muneLis[0].onmouseover = function () {
        //2-1、改变list的display
        list[0].style.display = "block";
      };
      list[0].onmouseover = function () {
        list[0].style.display = "block";
      };
      muneLis[0].onmouseout = function () {
        //2-1、改变list的display
        list[0].style.display = "none";
      };
      list[0].onmouseout = function () {
        list[0].style.display = "none";
      };

      muneLis[1].onmouseover = function () {
        //2-1、改变list的display
        list[1].style.display = "block";
      };
      list[1].onmouseover = function () {
        // list[1].style.display = 'block';
        list[1].style = "display: block; color: red;";
      };
      muneLis[1].onmouseout = function () {
        //2-1、改变list的display
        list[1].style.display = "none";
      };
      list[1].onmouseout = function () {
        // list[1].style.display = 'none';
        list.style = "display: none;";
      };
    </script>
  </body>
</html>
